<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>更新时的一个问题</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 遍历数组 -->
        <h3>人员列表</h3>
        <button @click="updateMei">更新马冬梅信息</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               sortType: 0,//0原顺序,1升序,2降序
               keyWord: '',
               persons: [
                   {id: '001',name: '马冬梅',age: 30,sex: '女'},
                   {id: '002',name: '周冬雨',age: 31,sex: '女'},
                   {id: '003',name: '周杰伦',age: 18,sex: '男'},
                   {id: '004',name: '温兆伦',age: 19,sex: '男'}
               ]
           },
           methods:{
               updateMei(){
                //    this.persons[0].name='马老师';
                //    this.persons[0].age=45;
                //    this.persons[0].sex='男';
                this.persons[0]={name: '马老师',age: 45,sex: '男'};
               }
           },
        });
    </script>
</body>

</html>